<template>
    <div>
        <el-container>
            <el-aside width="200px">
                <el-menu
                        default-active="2"
                      >
                    <el-menu-item index="2">
                        <i class="el-icon-menu"></i>
                        <span slot="title">用户管理</span>
                    </el-menu-item>
                    <el-menu-item index="4" @click="onLogout()">
                        <i class="el-icon-setting"></i>
                        <span slot="title">注销</span>
                    </el-menu-item>
                </el-menu>
            </el-aside>
            <el-main>
              <el-form inline ref="queryForm" size="mini" :rules="rules" :model="queryForm" label-width="80px">
                <el-form-item label="昵称">
                  <el-input clearable v-model="queryForm.nickName" placeholder="昵称"></el-input>
                </el-form-item>
                <el-form-item label="部门">
                  <el-select clearable v-model="queryForm.deptId" placeholder="请选择部门">
                    <el-option v-for="item in deptList" :label="item.deptName" :value="item.deptId" :key="item.deptId"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="onQuery">查询</el-button>
                  <el-button type="primary" @click="onAdd">添加</el-button>
                </el-form-item>
              </el-form>
                <el-table
                        :data="tableData"
                        border
                        style="width: 100%">
                    <el-table-column
                            fixed
                            prop="birthday"
                            label="生日"
                            width="150">
                    </el-table-column>
                    <el-table-column
                            prop="userName"
                            label="登录名"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="nickName"
                            label="昵称"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="phonenumber"
                            label="电话"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="deptId"
                            label="部门"
                            width="100" :formatter="(row)=> deptList.find(item => row.deptId == item.deptId).deptName">
                    </el-table-column>
                    <el-table-column
                        label="性别" :formatter="(row)=> row.sex == '0' ? '男' : '女'">
                    </el-table-column>
                    <el-table-column
                            fixed="right"
                            label="操作"
                            width="100">
                        <template slot-scope="scope">
                            <el-button @click="onUpdate(scope.row.userId)" type="text" size="small">修改</el-button>
                            <el-button  @click="onDelete(scope.row.userId)" type="text" size="small">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                        layout="prev, pager, next"
                        @current-change="onChangePageNo"
                       :page-size="queryForm.pageSize"
                        :current-page="queryForm.pageNo"
                        :total="total">
                </el-pagination>
              <el-dialog :title="title" :visible.sync="open">
                <el-form ref="form" :model="form" label-width="80px" size="mini">
                  <el-form-item label="登录名">
                    <el-input :readonly="form.userId ? true : false" v-model="form.userName"  auto-complete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="昵称">
                    <el-input v-model="form.nickName"  auto-complete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="电话">
                    <el-input v-model="form.phonenumber"  auto-complete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="生日">
                    <el-date-picker v-model="form.birthday" value-format="yyyy-MM-dd" type="date" placeholder="生日"></el-date-picker>
                  </el-form-item>
                  <el-form-item label="性别">
                      <el-radio v-model="form.sex" label="0">男</el-radio>
                      <el-radio v-model="form.sex" label="1">女</el-radio>
                  </el-form-item>
                  <el-form-item label="部门">
                    <el-select v-model="form.deptId" placeholder="请选择部门">
                      <el-option v-for="item in deptList" :label="item.deptName" :value="item.deptId" :key="item.deptId"></el-option>
                    </el-select>
                  </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                  <el-button size="mini" @click="open = false">取 消</el-button>
                  <el-button size="mini" type="primary" @click="submitForm">确 定</el-button>
                </div>
              </el-dialog>
            </el-main>
        </el-container>
    </div>
</template>

<script>
    import {list, get, add, del, update} from "@/api/index";
    import {list as listDept} from '@/api/dept';
    import {logout} from "@/api/login";

    export default {
        name: "index",
        methods: {
            getDeptList() {
                listDept().then(resp => {
                    this.deptList = resp.data;
                })
            },
            getList() {
                list(this.queryForm).then(resp => {
                    this.tableData = resp.data.records;
                    this.total = resp.data.total;
                })
            },
            onLogout() {
                this.$confirm('确定注销吗？','提示',{type:'warning'}).then(() => {
                    logout().then(res => {
                        this.$message.success('注销成功');
                        sessionStorage.removeItem("token");
                        this.$router.push('/');
                    })
                })
            },
            onChangePageNo(pageNo) {
                this.queryForm.pageNo = pageNo;
                this.getList()
            },
            onQuery() {
              this.queryForm.pageNo = 1;
              this.getList();
            },
            onUpdate(userId) {
              this.title = '修改用户';
              this.open = true;
              get(userId).then(resp => this.form = resp.data);
            },
            onDelete(userId) {
              this.$confirm('确定删除吗？', '提示', {type: 'warning'}).then(()=> {
                del(userId).then(() => {
                  this.$message.success('操作成功');
                  this.getList();
                })
              })
            },
            onAdd() {
              this.open = true;
              this.title = '添加用户';
              this.form = { sex: '0'};
            },
            submitForm() {
                if (this.form.userId) {
                  update(this.form).then(() => {
                    this.open = false;
                    this.$message.success('操作成功');
                    this.getList();
                  })
                } else {
                  add(this.form).then(() => {
                    this.open = false;
                    this.$message.success('操作成功');
                    this.getList();
                  })
                }
            }
        },
        created() {
            this.getList();
            this.getDeptList();
        },
        data() {
            return {
                queryForm: {
                    pageNo: 1,
                    pageSize: 2
                },
                total: 0,
                tableData: [],
                deptList: [],
                rules: {},
                form: {},
                title: '',
                open: false,
            }
        }
    }
</script>

<style scoped>

</style>